<template>
  <div class="panel greenhouse-info">
    <h2 class="panel-title">大棚信息</h2>
    <div class="info-content">
      <!-- TODO: 后端数据 - 大棚基本信息 -->
      <div class="info-item">
        <span class="label">大棚名称:</span>
        <span class="value">{{ info.name }}</span>
      </div>
      <div class="info-item">
        <span class="label">种植面积:</span>
        <span class="value">{{ info.area }}㎡</span>
      </div>
      <div class="info-item">
        <span class="label">地址位置:</span>
        <span class="value">{{ info.location }}</span>
      </div>
      <div class="info-item">
        <span class="label">创建时间:</span>
        <span class="value">{{ info.createTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const info = ref({
  name: '智慧大棚1号',
  area: 1000,
  location: '示例地址',
  createTime: '2024-01-01'
})
</script>

<style scoped>
.greenhouse-info {
  height: 200px;
}

.info-content {
  padding: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.label {
  color: #888;
}

.value {
  color: #42b983;
}
</style> 